<template>
  <div
    id="list"
    v-for="(item, index) in list"
    :key="index"
    @click="doCommunicate(item)"
  >
    <div id="neirong">
      <a-avatar size="large" :src="item.User.head" />
      <div style="margin-left: 10px">
        <div>{{ item.User.name }}</div>
        <div>给您发了 {{ item.Num }} 条消息</div>
      </div>
    </div>
    <div>
      <a-tag v-if="item.type" color="green">已读</a-tag>
      <a-tag v-else color="red">未读</a-tag>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { getTalk } from "../../api/message";

export default defineComponent({
  setup() {
    const router = useRouter();
    const list = ref([]);

    getTalk({
      url: "/message/getTalk",
      success: (res) => {
        // console.log(res.data);
        for (let i = 0; i < res.data.length; i++) {
          list.value.push({
            User: res.data[i],
            Num: res.data[i].content.length,
          });
        }
      },
      err: (err) => {
        console.log(err);
      },
    });

    const doCommunicate = (item) => {
    //   console.log(item);
      router.push({
        path: "/userInfo/messageBox",
        query: {
          uid: item.User.uid,
          name: item.User.name,
          head: item.User.head,
          content: item.User.content,
        },
      });
    };

    return {
      list,
      doCommunicate,
    };
  },
});
</script>

<style scoped>
#list {
  width: 90%;
  margin: 0 5% 10px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#list:hover {
  background: #bae7ff;
}
#neirong {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>